<!--
 * @Author: your name
 * @Date: 2022-02-24 09:20:36
 * @LastEditTime: 2022-02-24 11:22:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \briup-study\day04\定位.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        /* 默认文档流特点
        在文档中冲上而下进行布局
        2、块级元素独占一行，默认占满父元素的宽度的100%
        3、 */
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .two{
            background-color: #fac;
            /* 固定定位 */
            /* 脱离文档流 原先位置不保留 相对于视口区域进行定位
            如果没有使用定位属性 就在原先位置进行定位 */
            position: fixed;
           /*  top: 10px; */
            right: 10px;
            bottom: 10px;
        }
        .three{
            background-color: #456;
            /* 相对定位
            不脱离文档流 原先位置保留 使用了定位属性 相对于原先位置定位 */
            position: relative;
           /*  top: 10px; */
            left: 10px;
            bottom: 10px;
            z-index: 2;
        }
        .four{
            background-color: #6cd;
            /* 绝对定位
            脱离文档流，不保留原先位置
            1、如果有祖先定位元素 ，则根据最近的祖先定为元素进行定位
            2、如果没祖先定位元素，相对于视口区域进行定位
            如果没有定位属性则在原来位置定位 */
            position: absolute;
            top: 20px;
            left: 20px;

        
            /* 更改元素层叠顺序 */
            z-index: -1;
            
        }
        .five{
            background-color: #3fa;
            /* 粘性定位 不使用定位属性不脱离文档流 
            使用了定位属性后刚开始相对定位 滚动到一定位置固定定位 */
            position: sticky;
            top: 20px;
            left: 20px;
           /*  sticky=fixed+relative */
        }
        .six{
            background-color: #8bc;

        }
        /* 定位特点
        1、默认定位：静态定位
        2、相对定位：relative
            不脱离文档流 原先位置保留 使用了定位属性 相对于原先位置定位
        3、固定定位： fixed 
            脱离文档流 原先位置不保留 相对于视口区域进行定位
            如果没有使用定位属性 就在原先位置进行定位
            
        4、绝对定位：absolute
            脱离文档流，不保留原先位置
            1、如果有祖先定位元素 ，则根据最近的祖先定位元素（（position：absolute）重点要有定位元素）进行定位
            2、如果没祖先定位元素，相对于视口区域进行定位
            如果没有定位属性则在原来位置定位
        5、粘性定位：sticky
           不脱离文档流---不使用定位属性
            使用了定位属性后刚开始相对定位 滚动到一定位置固定定位
        6、更改元素层叠顺序
        z-index
        */
        
        
    </style>
</head>
<body>
    <div class="one ">静态定位，默认定位</div>
    <div class="two ">固定定位</div>
    <div class="three ">相对定位</div>
    <div class="four ">绝对定位</div>
    <div class="five ">粘性定位</div>
    <div class="six ">静态定位，默认定位</div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end
</body>
</html>